<template>
  <!--社区-->
  <div class="gw_commmunity_worp">
    <div class="commmunity_title">
      <span v-for="(item, key) in CtList" :key = key
            :class="[{style: key === one}]"
            @click="cut(key)"
      >{{item}}</span>
    </div>
    <p class="loginPrompt">你尚未登录， 点击登陆后列表会显示你喜欢的内容</p>
    <div class="journalism">
      <ul>
        <li v-for="(item, key) in shuju" :key = key>
          <div class="user">
            <img class="userimg" src="../../assets/tx.jpg" alt="">
            <p class="hypocoristic">还有这种操作</p>
            <span class="userTitle">天才要吃瓜</span>
          </div>
          <p class="headlineNewsTitle">奥斯卡建档立卡时间到了就爱上了</p>
          <div class="NetOperating">
            <img src="../../assets/pinglun2.png" alt=""><span>80</span>
            <img src="../../assets/dianzan.png" alt=""><span>80</span>
            <img src="../../assets/dengpao.png" alt=""><span>80</span>
            <p>视频</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "appHeader",
    data(){
      return{
        one:0,
        CtList:['关注','话题'],
        shuju:[1,2,3,4,5,6]
      }
    },
    methods:{
      cut(index) {
        this.one = index
      }
    },
    components:{

    }
  }
</script>

<style scoped>
  .gw_commmunity_worp{
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
    background: #ebedee;
  }
  .commmunity_title{
    padding: 0 20px;
    line-height: 88px;
    font-size: 30px;
    font-weight: bold;
    color: #7b7e84;
    background: white;
  }
  .style{
    color: #2f3136;
    font-size: 35px;
    border-bottom: solid 3px #b03035;
  }
  .commmunity_title span{
    margin-right: 40px;
    text-align: center;
    display: inline-block;
    width: 80px;
  }
  .loginPrompt{
    line-height: 60px;
    color: #7e8087;
    padding: 0 20px;
  }
  .journalism{
    height: 960px;
    position: relative;
  }
  .journalism ul{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .journalism ul li{
    height: 210px;
    border: solid 1px #dbdde1;
    box-sizing: border-box;
    padding: 20px;
  }
  .user{
    line-height: 50px;
    color: #96999e;
  }
  .userimg{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    vertical-align: middle;
  }
  .hypocoristic{
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    text-indent: 16px;
    font-weight: bold;
    font-size: 29px;
  }
  .userTitle{
    display: inline-block;
    text-indent: 20px;
    font-size: 25px;
    vertical-align: middle;
  }
  .headlineNewsTitle{
    font-size: 35px;
    line-height: 80px;
    font-weight: bold;
  }
  .NetOperating{
    height: 40px;
  }
  .NetOperating img{
    width: 28px;
    height: 28px;
    vertical-align: middle;
  }
  .NetOperating span{
    vertical-align: middle;
    display: inline-block;
    width: 50px;
    text-indent: 13px;
    padding-right: 36px;
  }
  .NetOperating p{
    display: inline-block;
    float: right;
    width: 50px;
    line-height: 29px;
    text-align: center;
    border-radius: 3px;
    font-size: 23px;
    border: solid 1px #ef8a33;
    color: #ef8a33;
  }
</style>
